<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <!-- Element UI CSS -->
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!--本地CSS-->
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/element.css">
</head>
<body>
<div id="app">
    <el-container>

        <el-header>
            <el-menu mode="horizontal" router>
                <el-menu-item index="/">
                    <strong class="text-primary">协同会议平台</strong>
                </el-menu-item>
                <el-menu-item style="float: right;" @click="logout">退出</el-menu-item>
            </el-menu>
        </el-header>

        <el-container style="height: 700px">
            <el-aside width="200px">

                <el-row class="sidebar-header" type="flex" align="middle">
                    <div class="demo-image__preview">
                        <a href="user_look.html">
                            <el-avatar style="width: 60px; height: 60px" src="img/avatar-6.jpg"></el-avatar>
                        </a>
                    </div>
                    <div>
                        <span style="margin-left:10px;font-size: 12px;font-weight: bold">小灰</span><br>
                        <span style="margin-left:10px;font-size: 12px;font-weight: bold">研发部</span>
                    </div>
                </el-row>

                <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                         :default-openeds="defaultOpeneds" default-active="1">
                    <a href="home.html">
                        <el-menu-item index="1">
                            <i class="el-icon-s-home"></i>
                            <span slot="title">主页</span>
                        </el-menu-item>
                    </a>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-user"></i>
                            <span>用户列表</span>
                        </template>
                        <el-menu-item-group>
                            <a href="user.html"><el-menu-item index="2-1">查看用户</el-menu-item></a>
                            <a href="my_user.html"><el-menu-item index="2-2">我关注的用户</el-menu-item></a>
                            <a href="article.html"><el-menu-item index="2-3">发布文章</el-menu-item></a>
                            <a href="article_collect.html"><el-menu-item index="2-4">我的收藏</el-menu-item></a>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-office-building"></i>
                            <span>部门列表</span>
                        </template>
                        <el-menu-item-group>
                            <a href="department.html"><el-menu-item index="3-1">全部部门</el-menu-item></a>
                            <a href="meeting.html"><el-menu-item index="3-2">会议系统</el-menu-item></a>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-main>
                <h2>主面板</h2>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-card>
                            <div class="progress-details d-flex align-items-end justify-content-between">
                                <div class="title"><strong>新增用户</strong></div>
                                <div class="number dashtext-1">27</div>
                            </div>
                            <el-progress :percentage="27" :show-text="false"></el-progress>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card>
                            <div class="progress-details d-flex align-items-end justify-content-between">
                                <div class="title"><strong>新增文章</strong></div>
                                <div class="number dashtext-3">140</div>
                            </div>
                            <el-progress :percentage="40" :show-text="false"></el-progress>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card>
                            <div class="progress-details d-flex align-items-end justify-content-between">
                                <div class="title"><strong>新开会议</strong></div>
                                <div class="number dashtext-6">8</div>
                            </div>
                            <el-progress :percentage="40" :show-text="false"></el-progress>
                        </el-card>
                    </el-col>
                </el-row>

                <section>
                    <div id="main" style="width: 80%; height: 400px;margin-top: 20px"></div>
                </section>
            </el-main>
        </el-container>

        <!-- Footer -->
        <el-row type="flex" justify="center">
            <p>&copy; 2025.Company <a href="#">协同会议平台</a></p>
        </el-row>
    </el-container>
</div>

<!-- JavaScript files -->
<script src="js/vue.min.js"></script>
<script src="js/element.js"></script>
<script src="js/echarts.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                defaultOpeneds: ['1', '2', '3'],
                activeIndex: '1'
            };
        },
        methods: {
            logout() {
                // Logout logic here
                window.location.href = "index.html";
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        },
        mounted() {
            var date = new Date();
            var days = [];

            for (var i = -6; i <= 0; i++) {
                date.setDate(date.getDate() + i);
                var month = date.getMonth() + 1;
                var day = date.getDate();
                if (month < 10) month = "0" + month;
                if (day < 10) day = "0" + day;
                days.push(month + "." + day);
                date.setDate(date.getDate() - i);
            }

            var myChart = echarts.init(document.getElementById('main'));
            var option = {
                title: {text: '数据汇总'},
                tooltip: {trigger: 'axis', axisPointer: {type: 'cross', label: {backgroundColor: '#aaaaff'}}},
                legend: {data: ['新增用户', '新增文章', '新开会议']},
                toolbox: {feature: {saveAsImage: {}}},
                grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
                xAxis: [{type: 'category', boundaryGap: false, data: days}],
                yAxis: [{type: 'value'}],
                series: [
                    {name: '新增用户', type: 'line', stack: '总量', areaStyle: {}, data: [3, 5, 7, 4, 6, 2, 6, 3, 4]},
                    {name: '新增文章', type: 'line', stack: '总量', areaStyle: {}, data: [15, 10, 12, 14, 12, 9, 10, 11, 8]},
                    {
                        name: '新开会议',
                        type: 'line',
                        stack: '总量',
                        label: {normal: {show: true, position: 'top'}},
                        areaStyle: {},
                        data: [8, 8, 9, 7, 9, 12, 13, 10, 11]
                    }
                ]
            };

            myChart.setOption(option);
        }
    });
</script>
</body>
</html>